<template>
    <div class="mainLeft fl w240 tc">
      <!--头像个人资料-->
      <div class="userInfo bg100 br2 w240 pt50 pb50">
        <dl class="f14 c60 lh24">
          <dt>
            <img :src="userInfo['imgUrl']" alt="" width="88" height="88" style="border-radius:44px;"/>
          </dt>
          <dd class="mt20 h36 lh36 mb5">
            <b class="f24 c7 fn vm mr5">{{userInfo['userName']}}</b>
            <img v-if="userInfo['sex']===1" class="vm" src="static/images/male.png"/>
            <img v-else class="vm" src="static/images/female.png"/>
          </dd>
          <dd>{{userInfo['birthday']}}</dd>
          <dd class="p10">{{userInfo['personSign']}}</dd>
        </dl>
      </div>
      <!--sideBar开始-->
      <div class="sideBar  bg100 mt10 br2">
        <ul>
          <li :class="(myFlag===item['flag'])?'pt20 pb20 clearfix hoverborder_grn_left curSideBar board-color':'pt20 pb20 clearfix hoverborder_grn_left'" v-for = "(item, index) in navList" @click="gotoOtherPage(item['flag'])">
            <i :class="((myFlag===item['flag'])?'curbgImgPosi-'+index*40:'')+' userCenterIcons bgImgPosi-'+index*40+' fl mr10 ml70'"></i>
            <a class="fl lh20 c7" href="javascript:void(0)">{{item['name']}}</a>
          </li>
        </ul>
      </div>
      <!--sideBar结束-->
    </div><!--mainLeft结束-->
</template>
<script>
import Utils from "../assets/Util"
export default {
    name:"usersidemenu",
    props:{
      flag:String
    },
    data(){
      return {
          myFlag:this.flag,
          userInfo:{},
          navList:[
            {
              name:"个人主页",
              flag:"home",
              funName:"gotoUserIndex"
            },
            {
              name:"我的圈子",
              flag:"circle",
              funName:"gotoCircle"
            },
            {
              name:"我的活动",
              flag:"active",
              funName:"gotoActive"
            },
            {
              name:"我的游记",
              flag:"travel",
              funName:"gotoTravel"
            },
            {
              name:"我的场地",
              flag:"place",
              funName:"gotoPlace"
            },
            {
              name:"审核失败",
              flag:"failPage",
              funName:"gotoFailPage"
            },
            {
              name:"我的收藏",
              flag:"collete",
              funName:"gotoCollete"
            },
            {
              name:"历史救援",
              flag:"help",
              funName:"gotoHelp"
            },
            {
              name:"账号设置",
              flag:"set",
              funName:"gotoSet"
            }
          ]
        }
    },
    mounted(){
      this.getUserInfo();
    },
    methods:{
      // 请求用户的信息
      getUserInfo(){
          let props = {
            url:"/user/GetUserInfo",
            data:{
              "id": localStorage.getItem("uId"),
              "token": localStorage.getItem("token"),
              "userNameExtend": "",
              "userID": localStorage.getItem("uId")
            },
            sCallBack:res => {
              if(res.data.code === 1){
                this.userInfo = res.data.data
              }else if(res.data.code === 4){
                this.refreshToken(this.getUserInfo());
              }else {
                this.$message.error("用户不存在,请重新登录");
                localStorage.setItem("token", "");
                localStorage.setItem("uId", "");
                localStorage.setItem("userHeadPic", "");
                localStorage.setItem("userNickName", "");
                this.$router.push({path:'/'})
              }
            },
            eCallBack:err => {
              this.$message.error("请求个人信息失败");
              console.log(err);
            }
          }
          Utils.myRequest(props);
      },
      // 刷新token
      refreshToken(callBack){
        let refresh = {
          url:"/user/GetToken",
          data:{
            token:localStorage.getItem('token')
          },
          sCallBack:(res) => {
            localStorage.setItem("token", res.data.data)
            callBack && callBack();
          },
          eCallBack:(err) => {
            console.log(err);
          }
        }
        Utils.myRequest(refresh);
      },
      // 跳转其他页面
      gotoOtherPage(flag){
        let path = "";
        switch (flag) {
          case "home":
            path = "/user";
            break;
          case "circle":
            path = "/UserCircle";
            break;
          case "active":
            path = "/userActivity";
            break;
          case "travel":
            path = "/UserTravel";
            break;
          case "place":
            path = "/UserPlace";
            break;
          case "collete":
            path = "/UserCollect";
            break;
          case "failPage":
            path = "/userVerifyFailed";
            break;
          case "help":
            path = "/historyHelp";
            break;
          case "set":
            path = "/userInfo";
            break;
        }
        this.$router.push({
          path:path
        });
      }
    }
}
</script>
<style scoped>
  .sideBar ul li{
    border-left:6px solid #fff;
  }
  .board-color{
    border-color:#119c5b !important;
  }
  .sideBar ul li:hover{
    border-color: #119c5b;
  }
</style>
